<script setup>
  import { ref } from 'vue'
  const emit = defineEmits(['switchOrderType'])
  const typeId = ref(1000)
  // 订单状态,,- 1 => '已取消', 0 => '未支付', 1 => '支付完成', 3 => '未发货', 4 => '已发货', 5 => '已收货', 6 => '已完成'
  const typeList = ref([
    { id: 1000, name: '全部' },
    { id: -1, name: '已取消' },
    { id: 0, name: '未支付' },
    { id: 1, name: '已付款' },
    // { id: 2, name: '待发货' },
    { id: 3, name: '待发货' },
    { id: 4, name: '已发货' },
    { id: 5, name: '已收货' },
    { id: 6, name: '已完成' }
  ])
  const tapType = (id) =>{
    if (typeId.value === id) return
    typeId.value = id
    emit('switchOrderType', typeId.value)
  }
</script>

<template>
  <div class="order-type">
    <div
        class="type-item"
        :class="item.id === typeId?'a-item':''"
        v-for="item in typeList"
        :key="item.name + item.id"
        @click="tapType(item.id)"
    > {{ item.name }} </div>
  </div>
</template>

<style scoped lang="scss">
  .order-type {
    width: 100%;
    max-width: 1300px;
    display: flex;
    position: fixed;
    top: 90px;
    left: 50%;
    z-index: 99;
    transform: translateX(-50%);
    background-color: #fff;
    scrollbar-width: none;
    &::-webkit-scrollbar {
      display: none;
    }
    .type-item {
      flex: 1;
      cursor: pointer;
      line-height: 44px;
      text-align: center;
      position: relative;
      white-space: nowrap;
      transition: all 0.3s ease-in-out;
      &::before {
        width: 0;
        height: 3px;
        content: '';
        display: block;
        position: absolute;
        bottom: 1px;
        left: 50%;
        transform: translateX(-50%);
        background-color: var(--primary);
        transition: all 0.3s ease-in-out;
      }
      &:hover {
        color: var(--primary);
      }
      &.a-item {
        color: var(--primary);
        &::before {
          width: 50%;
        }
      }
    }
  }

  @media (max-width: 750px) {
    .order-type {
      top: 44px;
      overflow: auto;
    }
    .type-item {
      flex: none;
      padding: 0 20px;
    }
  }
</style>